

<title>部署配置</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href=""></a>
        <a><cite>部署配置</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">

<link href="__style__/admin/index.css?v=1" type="text/css" rel="stylesheet" />
<link href="__style__/admin/index_me.css" type="text/css" rel="stylesheet" />


<style>

    /** layui-v2.5.7 MIT License */
    html #layuicss-skincodecss {
        display: none;
        position: absolute;
        width: 1989px
    }

    .layui-code-h3,.layui-code-view {
        position: relative;
        font-size: 12px
    }

    .layui-code-view {
        display: block;
        margin: 10px 0;
        padding: 0;
        border: 1px solid #e2e2e2;
        border-left-width: 6px;
        background-color: #F2F2F2;
        color: #333;
        font-family: Courier New
    }

    .layui-code-h3 {
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px solid #e2e2e2
    }

    .layui-code-h3 a {
        position: absolute;
        right: 10px;
        top: 0;
        color: #999
    }

    .layui-code-view .layui-code-ol {
        position: relative;
        overflow: auto
    }

    .layui-code-view .layui-code-ol li {
        position: relative;
        margin-left: 45px;
        line-height: 20px;
        padding: 0 5px;
        border-left: 1px solid #e2e2e2;
        list-style-type: decimal-leading-zero;
        *list-style-type: decimal;
        background-color: #fff
    }

    .layui-code-view pre {
        margin: 0
    }

    .layui-code-notepad {
        border: 1px solid #0C0C0C;
        border-left-color: #3F3F3F;
        background-color: #0C0C0C;
        color: #C2BE9E
    }

    .layui-code-notepad .layui-code-h3 {
        border-bottom: none
    }

    .layui-code-notepad .layui-code-ol li {
        background-color: #3F3F3F;
        border-left: none
    }


    .my-setting {
        margin: 10px 0px;
        background: #fff;
        border-radius: 8px;
    }

    .my-setting .head {
        height: 40px;
        line-height: 40px;
        background: #F5FAFF;
        display: flex;
        justify-content: space-between;
        border-radius: 8px;
    }

    .my-setting .head .title {
        padding-left: 16px;
    }

    .my-setting .head .action {
        padding: 0px 15px;
    }
    .my-setting .contents{
        font-size: 13px;
        color: #555555;
    }

    .copy-js-content{
        display: block;
        width: 100%;
        padding: 10px;
        border: none;
        resize: none;
        background: rgba(240, 240, 240, .8);
        margin: 5px 0;
    }
    .layui-btn.layui-btn-normal{
        color: #1E9FFF;
        background: #ffffff;
        border: 1px solid #1E9FFF;
        height: 32px;
        line-height: 32px;
        margin-left: 20px;
        border-radius: 15px;
    }
    #minjs{
        padding: 16px;
        font-size: 12px;
    }
    #wolive-js , #wechat-mp,#personal{
        padding-left: 16px;
        margin-bottom: 10px;
        color: #555555;
        font-size: 14px;
        border-radius: 8px;
        background: #f7f7f7;
    }
    #container{
        background-color: #fff;
    }
    #test-form-theme *,#test-form *,.layui-btn-container *,.layui-colorpicker-main-input *{box-sizing:content-box;-webkit-box-sizing:content-box; }
    .layui-colorpicker-main-input input.layui-input{width: 130px;}
    .layui-form-item{margin-bottom: 0;}
</style>

<script type="text/javascript">
    var width =document.body.clientWidth;
    var changeall =function(){
        $("#layout-west").css("width","160px");
        $("#layout-center").css({"position":"absolute","left":"160px","width":(width-160)+"px"});
        $(".info").removeClass("hide");
        $(".west_foot2").removeClass("hide");
        $(".west_foot1").addClass("hide");
        if($(".notices")[0].textContent > 0) {
            $('.notices').removeClass("hide");
            $('.notices-icon').addClass("hide");
        }
    }
    var changesmall =function(){
        if($(".notices")[0].textContent > 0) {
            $('.notices').removeClass("hide");
        }
    }
    // setInterval(function(){
    //     changesmall();
    // },1000);
    var is_bind_wechat = 1;
    if (!is_bind_wechat) {
        var index = layer.open({
            content: '您还未绑定微信，无法接受模板消息'
            ,btn: ['前去绑定','忽略']
            ,yes: function(index, layero){
                $.ajax({
                    url: "/admin/index/qrcode.html",
                    dataType: 'json',
                    success: function (res) {
                        layer.close(index);
                        layer.open({
                            type: 1,
                            content: '<img  src="'+res.data+'"/>',
                        });
                    }
                });
                return false;
            },
            btn2: function(index, layero){
                //按钮【按钮二】的回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,cancel: function(){

            }
        });
    }
</script>
<div id="container"  style="padding: 15px">
    <div class="front">
        <div class="my-setting">
            <div class="head">
                <div class="title">
                    部署网页组件（推荐）：网页咨询组件同时支持桌面网站和移动网站，提供强大的用户行为采集能力和系统对接能力
                </div>

            </div>
            <br />
            <div class="contents">
                聊天框样式：
                <select name="type" id="type" style="margin-left:20px;padding: 3px 10px;font-size: 14px;border-radius: 15px;border: 1px solid #e5e3e9;height: 32px;">
                    <<option value="0" >内嵌弹出</option>
                    <option value="1" selected>新开页面</option>
                </select>

                 <button id="bulidhtml" class="layui-btn layui-btn-normal" style="margin-left:10px"  data-file="html">生成html</button>
<!--                <button id="buildwechat" class="layui-btn layui-btn-normal" style="margin-left:10px" >生成微信公众号链接</button>-->
                <button id="buildpersonal" class="layui-btn layui-btn-normal" style="margin-left:10px"  data-file="link" >生成我的专属链接</button>
             <!--插件两个-->
            </div>
            <br/>
            <div class="layui-card" style="background-color: #F3F3F3;" id="diy-kf-site">
                <div class="layui-card-header">自定义设置(请设置好再点击生成)</div>
                <div class="layui-card-body">
                    <form class="layui-form" id="form-diy">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 120px">弹窗形式</label>
                            <div class="layui-input-inline">

                                <input type="radio" name="isopen" value="1" title="开启">
                                <input type="radio" name="isopen" value="0" title="关闭" checked>

                            </div>

                            <div class="layui-form-mid layui-word-aux">只对内嵌弹出有效</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 120px">弹窗延时</label>
                            <div class="layui-input-inline">
                                <input type="text" name="open_delay" placeholder="聊天窗口延时时间" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">单位秒，开启弹窗有效（只对内嵌弹出有效）</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 120px">弹窗高度</label>
                            <div class="layui-input-inline">
                                <input type="text" name="m_height" placeholder="聊天窗口弹窗高度" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">单位像素，只对内嵌弹出有效</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 120px">悬浮条背景色</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="m_kfbtbg" placeholder="请选择颜色" class="layui-input" id="m_kfbtbg" value="#13c9cb">
                            </div>
                            <div class="layui-inline">
                                <div id="test-form"></div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-form-mid layui-word-aux">客服悬浮条背景色</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 120px">主题颜色</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="theme" placeholder="请选择颜色" class="layui-input" id="theme" value="#13c9cb">
                            </div>
                            <div class="layui-inline">
                                <div id="test-form-theme"></div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-form-mid layui-word-aux">聊天窗口主题色</div>
                            </div>
                            <input type="hidden" name="box_type" class="box_type" value="0">
                            <input type="hidden" name="build_file" class="build_file" value="js">
                        </div>
                    </form>
                </div>
            </div>

            <div class="method" >
                <div id="codearea" class="layui-hide">

                    <pre id="frontjs" class="copy-js-content layui-hide" style="height: auto">
                            部署如下代码
                            <div class="layui-code">

                            </div>
                     </pre>
                    <pre id="minjs" class="copy-js-content layui-hide" style="margin-bottom: 50px">
<span>如果需要添加自身网站用户数据，请部署到<bold style="color: red">上面代码之前</bold>，按注释要求添加：</span>
                         <div class="layui-code">
   &lt;script type="text/javascript">
    &nbsp;&nbsp;var ai_service={};
     &nbsp;ai_service.visiter_id='';//访客id
    &nbsp;&nbsp;ai_service.visiter_name='';//访客昵称
     &nbsp;ai_service.avatar='';//访客头像绝对路径
    &nbsp;&nbsp;ai_service.product='{}';//json数据字符串
/**
 json数据字符串格式如下：
  ai_service.product = {'pid':1,
   'title':'Xiaomi 13 Ultra',
   'cover_url':'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1681805074.57094989.png',
   'info':'卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式| 第二代骁龙8｜2K OLED 屏幕｜5000mAh大电量｜90W 小米澎湃有线秒充｜50W Pro 小米澎湃无线秒充',
   'price':'5999.00',
   'url':'https://www.mi.com/shop/buy/detail?product_id=18363'}
 */
    &lt;/script>
                         </div>

                     </pre>


                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</div>
<script>

    layui.use(['form','code','colorpicker'], function(){
        var form = layui.form,colorpicker = layui.colorpicker,$ = layui.$;

        form.render();
        //各种基于事件的操作，下面会有进一步介绍
        colorpicker.render({
            elem: '#test-form'
            ,color: '#13c9cb'
            ,done: function(color){
                $('#m_kfbtbg').val(color);
            }
        });
        colorpicker.render({
            elem: '#test-form-theme'
            ,color: '#13c9cb'
            ,done: function(color){
                $('#theme').val(color);
            }
        });
        layui.code({elem:'#minjs .layui-code'});
        $("#type").parent().find('button').click(function () {
            $("#codearea").removeClass('layui-hide');
            $(".build_file").val($(this).data('file'));
            $("#frontjs").siblings().addClass('layui-hide');
            $(".box_type").val($("#type").val());
            var build_file = $(this).data('file');
            $.ajax({
                url:"{:url('build')}", //请求的url地址
                dataType:'json',
                data:$("#form-diy").serialize(),
                type:"POST",   //请求方式
                success:function(res){
                    if(res.code == 0){

                        $("#frontjs").removeClass('layui-hide');
                        $("#frontjs .layui-code").html(res.data.html);
                        layui.code({elem:'#frontjs .layui-code'});
                        if (1 != $(".box_type").val())
                        {
                            $("#minjs").removeClass('layui-hide');
                        }
                        if (res.message)
                        {
                            layer.msg(res.message,{icon:1,end:function(){
                                }});
                        }
                    }else{
                        layer.msg(res.msg,{icon:2});
                    }
                }
            });


        })

        $("#type").change(function () {
            if($("#type").val() == 0){
                $('#buildpersonal').addClass('layui-hide');
            }else {
                $('#buildpersonal').removeClass('layui-hide');
            }
        })
    });
</script>